<template>
  <el-card>
    <div id="root">
      <div id="top">
        <img :src="avatarUrl" />
        <div class="v-between">
          <div>
            <span
              style="font-size: 1.3em; color: #ff6400; cursor: pointer"
              @click="openFile"
              >上传头像</span
            >
            <input
              type="file"
              id="fileRef"
              @change="fileUpload"
              style="display: none"
            />
          </div>
          <div style="font-size: 0.8em">数据表明招聘者对真实头像更有好感</div>
        </div>
      </div>
      <div id="mid">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="form-split">
            <div>
              <el-form-item label="真实姓名" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio v-model="form.sex" :label="true">男</el-radio>
                <el-radio v-model="form.sex" :label="false">女</el-radio>
              </el-form-item>
              <el-form-item label="出生年月" prop="birthday">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.birthday"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="政治面貌" prop="politic_static">
                <el-select
                  v-model="form.politicStatus"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="中共党员" value="中共党员"></el-option>
                  <el-option
                    label="中共预备党员"
                    value="中共预备党员"
                  ></el-option>
                  <el-option label="共青团员" value="共青团员"></el-option>
                  <el-option label="群众" value="群众"></el-option>
                  <el-option label="民主党派" value="民主党派"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="薪资" prop="salary">
                <el-input v-model="form.salary"></el-input>
              </el-form-item>
              <el-form-item label="当前城市" prop="address">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
              <el-form-item label="目前状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    label="在校，看看机会"
                    value="在校，看看机会"
                  ></el-option>
                  <el-option
                    label="在校，暂时不找工作"
                    value="在校，暂时不找工作"
                  ></el-option>
                  <el-option
                    label="在校，可即可到岗"
                    value="在校，可即可到岗"
                  ></el-option>
                  <el-option
                    label="离校，正在找工作"
                    value="离校，正在找工作"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </div>
          </div>
          <div id="bottom">
            <el-button type="primary" @click="submit">确定</el-button>
            <slot />
          </div>
        </el-form>
      </div>
    </div>
  </el-card>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  props: ["employee"],
  emits: ["submit"],
  data() {
    return {
      sex: 0,
      form: {
        name: "",
        sex: true,
        birthday: "",
        politicStatus: "",
        email: "",
        salary: "",
        address: "",
        status: "",
        phone: "",
      },
      avatarUrl: this.employee.avatarUrl,
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    submit() {
      this.form.username = sessionStorage.getItem("username");
      this.axios.post("/employee/update-info", this.form).then((res) => {
        if (res.data.code == 200) {
          this.$emit("submit");
          ElMessage.success(res.data.message);
        } else {
          ElMessage.error(res.data.message);
        }
      });
      console.log(this.form);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openFile() {
      document.getElementById("fileRef").click();
    },
    fileUpload() {
      const uploadFile = document.getElementById("fileRef").files[0];
      if (uploadFile) {
        const formData = new FormData();
        formData.append("file", uploadFile);
        formData.append("username", sessionStorage.getItem("username"));
        this.axios.post("/upload/employee-avatar", formData).then((res) => {
          if (res.data.code === 200) {
            this.avatarUrl = res.data.data;

            localStorage.setItem("avatarUrl", this.avatarUrl);

            window.location.reload();
          }
        });
      }
    },
  },
  created() {
    if (this.employee != null) {
      this.form = this.employee;
    }
  },
};
</script>

<style>
#top {
  padding: 0 30px;
  height: 80px;
  display: flex;
}
#top > img {
  height: 100%;
  border-radius: 100px;
}
.v-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 30px;
}
.mid {
  display: flex;
}
.form-split {
  display: flex;
}
.form-split > div {
  width: 50%;
  padding: 0 30px;
}
#bottom {
  padding: 0 30px;
  display: flex;
  justify-content: flex-end;
}
</style>